import { useState } from 'react';
import './App.css';
import SubmitForm, { Core as SubmitFormHeadless } from './headless';

function FormOne () {
  const [name, SetName] = useState('lion');
  const [age, SetAge] = useState(32);
  const [job, Setjob] = useState('fe');
  return (
    <SubmitFormHeadless view={(submitHandler) => {
      return <div>
        你叫啥名：<input placeholder="名字" value={name} onChange={(e) => {SetName(e.target.value);}} /><br />
        你多大了：<input placeholder="年龄" value={age} onChange={(e) => {SetAge(e.target.value);}} /><br />
        你干啥的：<input placeholder="职业" value={job} onChange={(e) => {Setjob(e.target.value);}} /><br />
        <input type="submit" value="提交" onClick={() => {
          submitHandler({name, age, job});
        }} />
      </div>
    }} />
  );
}
function FormTwo () {
  const [name, SetName] = useState('lion');
  const [age, SetAge] = useState(32);
  const [job, Setjob] = useState('fe');
  return (
    <SubmitFormHeadless>{(submitHandler) => {
      return <div>
        你叫啥名：<input placeholder="名字" value={name} onChange={(e) => {SetName(e.target.value);}} /><br />
        你多大了：<input placeholder="年龄" value={age} onChange={(e) => {SetAge(e.target.value);}} /><br />
        你干啥的：<input placeholder="职业" value={job} onChange={(e) => {Setjob(e.target.value);}} /><br />
        <input type="submit" value="提交" onClick={() => {
          submitHandler({name, age, job});
        }} />
      </div>
    }}</SubmitFormHeadless>
  );
}

function App() {
  return (
    <div className="App">
      <FormOne />
      <FormTwo />
    </div>
  );
}

export default App;
